<template>
	<div>
		<Banner :propsbanner='bannerlist'></Banner>
		<Icons :propsicons='iconslist'></Icons>
		<Tabs :propstabs='tabslist'></Tabs>
		<SlideTxt :propslidetxt='SlideTxtlist'></SlideTxt>
		<SwiperOne :propswiperone='swiperlist'></SwiperOne>
		<Spike :propspike='spikelist'></Spike>
		<Choice></Choice>
		<Minority></Minority>
		<Travel></Travel>

		<Buttom :propurl="arrUrl"></Buttom>
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	
	import Banner from './pages/Banner'
	import Icons from './pages/Icons'
	import Tabs from './pages/Tabs'
	import SlideTxt from './pages/SlideTxt'
	import SwiperOne from './pages/SwiperOne'
	import Spike from './pages/Spike'
	import Choice from './pages/Choice'
	import Minority from './pages/Minority'
	import Travel from './pages/Travel'

	import Buttom from '../default/Buttom'
	
	export default{
		name:'Home',
		components:{
			Banner,Icons,Tabs,SlideTxt,SwiperOne,Spike,Choice,Minority,Travel
			,Buttom
		},
		data(){
			return{
				arrUrl:['img/home.png','img/o-order.png','img/o-user.png'],
				bannerlist:[],spikelist:[],iconslist:[],tabslist:[],SlideTxtlist:[],swiperlist:[]
			}	
		},
		//created：当前组件创建之后【el挂载之前（标签未渲染），data函数已经完成初始化】
		//父组件需要将请求的数据给子组件，满足：1.data函数已初始化；2。响应数据传给子组件（组件已渲染）
		//mounted：组件挂载之后【如果接口复杂/多个接口的时候，优先考虑】
		created() {
			let that=this//备份
			this.axios.get('/api/dataHome.json').then((res)=>{
				let data=res.data.Homemsg[that.cityid]
				that.bannerlist=data.BannerVuelist
				that.spikelist=data.SpikeVuelist
				that.iconslist=data.IconsVuelist
				that.tabslist=data.TabsVuelist
				that.SlideTxtlist=data.SlideTxtVuelist
				that.swiperlist=data.SwiperOneVuelist
			}).catch((error)=>{
				console.log(error)
			})
		},
		computed:{
			...mapState(['cityid'])
		},
		watch:{
			cityid(){
				
				let that=this//备份
				this.axios.get('/api/dataHome.json').then((res)=>{
					let data=res.data.Homemsg[that.cityid]
					that.bannerlist=data.BannerVuelist
					that.spikelist=data.SpikeVuelist
					that.iconslist=data.IconsVuelist
					that.tabslist=data.TabsVuelist
					that.SlideTxtlist=data.SlideTxtVuelist
					that.swiperlist=data.SwiperOneVuelist
				}).catch((error)=>{
					console.log(error)
				})
			}
		}
	}
</script>

<style>
</style>
